<template>
  <panel title="表单详细">
    <a-card
      :bordered="false"
      class="detailedTab"
      :loading="loading"
      :key="cardKey"
    >
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="查看表单">
          <readonlyForm :data="data"></readonlyForm>
        </a-tab-pane>
        <a-tab-pane key="2" tab="查看流程" force-render>
          <readonlyFlow
            :taskId="taskId"
            :groupId="groupId"
            :flowId="flowId"
          ></readonlyFlow>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </panel>
</template>
<script>
  import readonlyFlow from '@/views/workbench/readonlyFlow'
  import readonlyForm from '@/views/workbench/readonlyForm'
  import { Get } from '@/api/flowtask/api'
  export default {
    // name: 'detailed',
    components: {
      readonlyForm,
      readonlyFlow,
    },
    data() {
      return {
        data: {},
        taskId: null,
        flowId: null,
        groupId: null,
        cardKey: '',
        loading: true,
      }
    },
    created() {
      this.load()
    },
    mounted() {},
    watch: {
      $route() {
        if (this.$route.path === '/workbench/detailed') {
          this.load()
        }
      },
    },
    methods: {
      load() {
        this.flowId = this.$route.query.flowId
        this.taskId = this.$route.query.taskId
        this.groupId = this.$route.query.groupId
        Get({ flowId: this.flowId, taskId: this.taskId }).then((res) => {
          // console.log(' res.content', res.content)
          if (res.isSuccess) {
            this.data = res.content
            this.loading = false
          }
        })
      },

      handleDataChange(field, value, data) {
        console.log(field, value, data)
      },
      callback() {},
    },
  }
</script>
<style scoped>
  .detailedTab {
    width: 100%;
    height: 100%;
  }
  .detailedTab > a {
    float: left;
    margin-left: 30%;
  }
  .detailedTab > span {
    width: 100%;
    height: 600px;
  }
</style>
